import React, { useEffect, useRef } from 'react';
import { Box, GlobalStyles } from '@mui/material';
import HomeIcon from '@mui/icons-material/Home';
import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
import FlashOnIcon from '@mui/icons-material/FlashOn';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import PriceCheckIcon from '@mui/icons-material/PriceCheck';

const BackgroundIcons = () => {
  const iconSections = useRef([]);
  
  useEffect(() => {
    // Create intersection observer to track when each section is in view
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // When section is in view, add active class to make icon visible
            entry.target.classList.add('icon-section-active');
          } else {
            // When section is out of view, remove active class to hide icon
            entry.target.classList.remove('icon-section-active');
          }
        });
      },
      {
        // Configure to trigger when section is in middle 50% of viewport
        rootMargin: '-25% 0px -25% 0px',
        threshold: 0.1
      }
    );

    // Observe all icon sections
    iconSections.current.forEach((section) => {
      if (section) {
        observer.observe(section);
      }
    });

    return () => observer.disconnect();
  }, []);

  return (
    <>
      <GlobalStyles
        styles={`
          .icon-section {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s ease;
            z-index: 0;
          }

          .icon-section-active {
            opacity: 0.08;
          }

          .icon-section svg {
            width: 80vw;
            max-width: 500px;
            height: auto;
            color: #1976d2;
          }
        `}
      />

      {/* Home Icon Section */}
      <Box
        className="icon-section"
        ref={(el) => (iconSections.current[0] = el)}
        sx={{ minHeight: '100vh' }}
      >
        <HomeIcon fontSize="inherit" />
      </Box>

      {/* Photo Camera Icon Section */}
      <Box
        className="icon-section"
        ref={(el) => (iconSections.current[1] = el)}
        sx={{ minHeight: '100vh' }}
      >
        <PhotoCameraIcon fontSize="inherit" />
      </Box>

      {/* Flash Icon Section */}
      <Box
        className="icon-section"
        ref={(el) => (iconSections.current[2] = el)}
        sx={{ minHeight: '100vh' }}
      >
        <FlashOnIcon fontSize="inherit" />
      </Box>

      {/* Account Balance Icon Section */}
      <Box
        className="icon-section"
        ref={(el) => (iconSections.current[3] = el)}
        sx={{ minHeight: '100vh' }}
      >
        <AccountBalanceIcon fontSize="inherit" />
      </Box>

      {/* Price Check Icon Section */}
      <Box
        className="icon-section"
        ref={(el) => (iconSections.current[4] = el)}
        sx={{ minHeight: '100vh' }}
      >
        <PriceCheckIcon fontSize="inherit" />
      </Box>
    </>
  );
};

export default BackgroundIcons;

